<template>
	<view v-if="pageData">
		<u-navbar title="预定订单" @leftClick="leftClick" :autoBack="true" placeholder :leftIcon="leftIcon"
			:titleStyle="titleStyle">
		</u-navbar>

		<view class="Heads">订单状态：{{ orderState }}</view>
		<!-- 订单信息 -->
		<view class="Box auto">
			<text class="color_66 size32">订单信息</text>
			<view class="boxs">
				<view class="list m-top24">
					<text class="name">编号:</text>
					<text class="black size30">{{ info.scan_order_code }}</text>
				</view>
				<view class="list m-top24">
					<text class="name">商品:</text>
					<text class="black size30">{{ site_time.name }}</text>
				</view>
				<view class="list m-top24">
					<text class="name">金额:</text>
					<text class="black size30">{{ info.order_price }}</text>
				</view>

				<view class="list m-top24" v-if="info.sites_detail">
					<text class="name">数量:</text>
					<text class="black size30">{{ info.sites_detail.length }}</text>
				</view>
				<view class="list m-top24">
					<text class="name">状态:</text>
					<text class="black size30">{{ orderState }}</text>
				</view>
			</view>
		</view>

		<view class="Wrapper" v-if="info.state == 3">
			<text class="black size28">出示二维码或劵号即可使用</text>
			<view class="CodeBox">
				<image :src="$imgUrls(info.qr_code)" mode="aspectFill" class="codeImg"></image>
			</view>
			<text class="black size28">劵码：{{ info.scan_order_code }}</text>
		</view>

		<!-- 顾客信息 -->
		<view class="Box auto m-top30">
			<text class="color_66 size32">顾客信息</text>
			<view class="boxs">
				<view class="list m-top24">
					<text class="name">日期:</text>
					<text class="black size30">{{ info.add_time }}</text>
				</view>
				<view class="list m-top24">
					<text class="name">姓名:</text>
					<text class="black size30">{{ info.user_name }}</text>
				</view>
				<view class="list m-top24">
					<text class="name">电话:</text>
					<text class="black size30">{{ info.user_tel }}</text>
				</view>
				<view class="list m-top24">
					<text class="name">桌号:</text>
					<view class="zhjils">
						<view class="li" v-for="(item, index) in info.sites_detail" :key="index">{{ item.type_name }}
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="list j-sb ">
					<view class="d-flex a-center">
						<text class="name">摄影:</text>
						<text class="black size30">{{ info.sites_detail[0].make_up_date_str }}</text>
					</view>
					<view class="d-flex a-center" v-if="info.force_refuse_make_up && info.force_refuse_make_up == 1">
						<text class="color_66 size28">已退款：</text>
						<text class="black size30">{{info.force_refuse_make_up_money}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="row j-centert p-top30 p-bot30" v-if="info.state == 3">
				<view class="btns btnOne" @click="toLetter">邀请函</view>
				<view class="btns refund" @click="toRefund">申请退款</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: 'https://msraimgcdn.mogoie.com/6142/1735177404230.jpg',
				titleStyle: {
					fontWeight: 'bold',
				},
				order_id: '7335', // 7335
				pageData: '',
				info: '',
				site_time: '',
				leftIcon: 'arrow-left', // home
			};
		},
		onLoad(opt) {
			if (opt.order_id) this.order_id = opt.order_id;
			if (opt.home) this.leftIcon = 'home';
		},
		onShow() {
			this.getLockOrder();
		},
		methods: {
			leftClick() {
				if (this.leftIcon == 'home') {
					uni.reLaunch({
						url: '/pages/index/index',
					});
				} else {
					this.$back();
				}
			},
			getLockOrder() {
				this.$http
					.get({
						url: '/SiteApi/getLockOrder',
						data: {
							order_id: this.order_id,
						},
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg);
						const result = res.data;
						this.pageData = result;
						this.info = result.info;
						this.site_time = result.site_time;
					});
			},

			toLetter() {
				this.toUrl(`letter?order_id=${this.order_id}`);
			},
			toRefund() {
				this.toUrl(
					`refund?price=${this.info.order_price}&name=${this.site_time.name}&order_id=${this.order_id}`
				);
			},
		},
		computed: {
			orderState() {
				if (!this.info) return;
				const obj = {
					1: '待使用',
					2: '已使用',
					3: '待核销',
					4: '已过期',
					5: '已退款',
					6: '退款中',
				};
				if (this.info.state == 3 && this.info.tail_price == 0) return '待核销';
				return obj[this.info.state];
			},
		},
	};
</script>
<style lang="scss">
	page {
		background-color: $pages;
	}
</style>
<style lang="scss" scoped>
	.Heads {
		width: 100%;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #cc6652;
		font-size: 34rpx;
		font-weight: bold;
	}

	.Wrapper {
		width: 710rpx;
		background-color: #fffcf7;
		padding: 24rpx;
		border-radius: 10rpx;
		margin: 30rpx auto 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.CodeBox {
			width: 440rpx;
			height: 400rpx;
			background-color: #fff;
			margin: 24rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;

			.codeImg {
				width: 340rpx;
				height: 340rpx;
			}
		}
	}

	.Box {
		width: 710rpx;
		background-color: #fffcf7;
		padding: 24rpx;
		border-radius: 10rpx;

		display: flex;
		flex-direction: column;

		.boxs {
			width: 100%;
			display: flex;
			flex-direction: column;

			.list {
				display: flex;

				.name {
					color: #666;
					font-size: 28rpx;
					margin-right: 30rpx;
				}

				.zhjils {
					flex: 1;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.li {
						padding: 6rpx 24rpx;
						border-radius: 8rpx;
						background-color: #efebe2;
						color: #000;
						font-size: 26rpx;
						margin-right: 12rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		padding: 50rpx 0;

		.btns {
			width: 280rpx;
			height: 84rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			font-size: 30rpx;
			margin: 0 20rpx;
		}

		.btnOne {
			background-color: #e5e5e5;
			border: 1rpx solid #ccc;
			color: #333;
		}

		.refund {
			background-color: #cc6652;
			border: 1rpx solid #cc6652;
			color: #fff;
		}
	}
</style>